<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { ElMessage } from "element-plus";
import {useRouter} from "vue-router";
// 侧导航折叠
const isCollapse = ref(false);
const router = useRouter(); // 使用 useRouter 钩子
const loginname = ref(''); // 假设您有一个登录用户名的响应式变量
// 退出登录
function logout() {
  // 这里可以添加发送给后端的请求，以清除服务器端的session或token
  // 例如：axios.post('/logout').then(() => {})

  // 清除本地存储的登录信息，如果有
  // localStorage.removeItem('userToken');

  // 重置登录名
  // loginname.value = '';

  // 导航回主页面
  router.push('/');
}
</script>

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            background-color="#21213b"
            text-color="#fff"
            active-text-color="#fff"
            :collapse="isCollapse"
            router
        >
          <h2>管理员系统</h2>
          <el-menu-item index="/main">
            <el-icon><House /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-menu-item index="/custom">
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </el-menu-item>
          <el-sub-menu>
            <template #title>
              <el-icon><setting /></el-icon>
              <span>商品管理</span>
            </template>
            <el-menu-item index="/data">
              <el-icon><setting /></el-icon>
              <span>商品管理</span>
            </el-menu-item>
            <el-menu-item index="/sort">
              <el-icon><setting /></el-icon>
              <span>商品分类</span>
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item index="/order">
            <el-icon><Memo /></el-icon>
            <span>订单管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <el-icon @click="isCollapse=!isCollapse">
            <Fold v-show="!isCollapse" />
            <Expand v-show="isCollapse" />
          </el-icon>
          <span>{{ loginname }}</span>
          <el-button style="background-color: #ddf3fc" @click="logout">
            退出登录
          </el-button>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>

<style scoped>
.el-aside{
  width: auto;
  height: 100vh;
  background-color: #21213b;
}
.el-menu{
  width: 200px;
}
.el-menu.el-menu--collapse{
  width: 60px;
}
.el-menu-item.is-active{
  background-color: #409eff!important;
}
ul.el-menu--vertical{
  --el-menu-hover-bg-color: #545c64!important;
}
.el-aside h2{
  font-size: 18px;
  color: #fff;
  text-align: center;
  height: 60px;
  line-height: 60px;
  /* 超出部分隐藏 */
  overflow: hidden;
}
.el-header{
  width: 100%;
  height: 60px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;

}
.el-main{
  background-color: aliceblue;
  padding: 0;
}
.el-menu.el-menu.manage{
  float: left;
}
</style>
